<div class="container-fluid dashboard-content">
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="page-header">
                <h2 class="pageheader-title">软件管理</h2>
                <hr>
            </div>
        </div>
    </div>
    <div class="dashboard-short-list">
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="card">
                <div class="card-body">
                    <form>
                        <input class="form-control form-control-lg" type="search" placeholder="Search" id="q" value="{{ q }}">
                        <button class="btn btn-brand search-btn" type="submit" onclick="search()">Search</button>
                    </form>
                </div>
            </div>
        </div>
        <div id="software" style="width: 100%">
        {% if software|length > 0 %}
        {% for item in software %}
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-xl-9 col-lg-12 col-md-12 col-sm-12 col-12">
                                    <div class="pl-xl-3">
                                        <div class="m-b-0">
                                            <div class="user-avatar-name d-inline-block">
                                                <h2 class="font-24 m-b-10">{{ item }}</h2>
                                            </div>
                                        </div>
                                        <div class="user-avatar-address">
                                            <p class="mb-2">{{ software[item][0].get('describe') }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-lg-12 col-md-12 col-sm-12 col-12">
                                    <div class="float-xl-right float-none mt-xl-0 mt-4">
                                        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">安装</a>
                                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="display: none;">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="exampleModalLabel">选择安装版本</h5>
                                                        <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">×</span>
                                                        </a>
                                                    </div>
                                                    <div class="modal-body text-center">
                                                        <button class="btn btn-light dropdown-toggle" data-toggle="dropdown" type="button" aria-expanded="false">选择版本<span class="caret"></span></button>
                                                        <div class="dropdown-menu" role="menu" x-placement="top-start" style="position: absolute; transform: translate3d(0px, -152px, 0px); top: 0px; left: 0px; will-change: transform;">
                                                            {% for each in software[item] %}
                                                            <a class="dropdown-item" href="#">{{ each['version'] }}</a>
                                                            {% endfor %}
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <a href="#" class="btn btn-secondary" data-dismiss="modal">取消</a>
                                                        <a href="#" class="btn btn-primary">立即安装</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        {% endfor %}
        {% else %}
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="card-header text-center">
                    <h3>没找到与“{{ q }}”相关的结果。</h3>
                </div>
            </div>
        {% endif %}
        </div>
    </div>
    </div>
</div>